import { onMounted, defineEmits, type Ref } from 'vue'
import { debounce } from './tools'
export default function useLoadMore(
  element: Ref<null | Element>,
  emit: (event: 'loadMore', ...args: any[]) => void
) {
  function loadMore() {
    // 获取可视区的高度
    const containerHeight = element.value?.clientHeight
    const scorllTop = element.value?.scrollTop
    const scorllHeight = element.value?.scrollHeight
    if (containerHeight! + scorllTop! + 20 >= scorllHeight!) {
      emit('loadMore')
    }
  }
  onMounted(() => {
    element.value?.addEventListener('scroll', debounce(loadMore, 1000))
  })
}
